function isValueNumber(val) {
    return (/(^-?[0-9]+\.{1}\d+$)|(^-?[0-9][0-9]*$)|(^-?0{1}$)/).test(val)
}

Vue.component('input-number',{
    template:`
<div class="input-number">
    <input type="text" :value="currentValue" @change="handleChange">        
    <button @click="handleDown" :disabled="currentValue<=min">-</button>
    <button @click="handleUp" :disabled="currentValue>=max">+</button>
</div>
    `,
    props:{
        max:{
            type:Number,
            default:Infinity
        },
        min:{
            type:Number,
            default:-Infinity
        },
        value:{
            type:Number,
            default:0
        }
    },
    data(){
        return {currentValue:this.value}
    },
    beforeCreate(){
      console.log(22)
    },
    mounted(){
      console.log(this)
    },
    watcher:{
      currentValue(val){
          this.$emit('input',val)
          this.$emit('on-change',val)
      },
      value(val){
          this.updateVal(val)
      }
    },
    methods:{
        handleDown(){
            if(this.currentValue<=this.min)return
            this.currentValue--
        },
        handleUp(){
            if(this.currentValue>=this.max)return
            this.currentValue++
        },
        handleChange(event){
            let val = event.target.value.trim()
            let max = this.max
            let min = this.min
            if(isValueNumber(val)){
                val = Number(val)
                this.currentValue =val
                this.currentValue = Math.max(val,min)
                this.currentValue = Math.min(val,max)
                // if(val>max)this.currentValue=max
                // if(val<min)this.currentValue=min
            }else {
                event.target.value = this.currentValue
            }
        },
        updateVal(val){
            val = Math.min(this.max,val)
            val = Math.max(this.min,val)
            this.currentValue = val
        }
    }
})